<template lang="pug">
  el-card.arvhiveWrapper(shadow="never" :bodyStyle="{padding: '30px'}" :border="false")
    .table-operator.tr
      el-button(size="large" round @click="() => saveContent(chosedArchive)" :loading="addSubmitting") 保存
      <!--el-button(size="large" round @click="!chosedArchive") 打印-->
      <!--el-button(size="large" round @click="downloadHandle") 下载-->
      <!--el-button.gradientVertical(size="large" round @click="fullSreen") 全屏-->
    el-row.mt20(:gutter="30")
      el-col(:span="8")
        el-card.listBox(shadow="never" :bodyStyle="{padding: 0}" border)
          .item(v-for="item in list" :key="item.id" @click="choseDoc(item)")
            .dv
              el-link(:underline="false" :type="chosedArchive && chosedArchive.id === item.id ? 'primary' : 'info'") {{item.title}}
            el-button(icon="el-icon-edit" circle @click.stop="addHandle('edit', item)" size="mini")
            el-button(icon="el-icon-delete" :loading="delSubmitting" circle @click.stop="delDocument(item)" size="mini")
        p.mt20
          el-button.gradientVertical(size="large" round @click="addHandle('add')") 添加
      el-col(:span="16")
        markdown-editor(id="archiveDetail" ref="archiveDetail" height="500px")
    modal-form(
      title="文件名称"
      :visible.sync="addObj.visible"
      :fields="addField"
      :submitHandle="addSubmit"
      :submitting="addSubmitting"
      :layoutCol="{ sm: 24, md: 24, lg: 24 }"
    )
</template>
<script>
import { mapGetters } from 'vuex'
import IPagination from '@/components/Basic/Pagination'
import MarkdownEditor from '@/components/Basic/MarkdownEditor'
import { getInfoList, addDocument, delDocument } from './api'
import { downloadCode } from '@/utils/download'
import { isEmpty } from '@/utils/util'

export default {
  components: {
    IPagination,
    MarkdownEditor
  },
  data () {
    return {
      loading: false,
      list: [],
      pagination: {
        total: 0,
        limit: 10,
        pageSize: 10
      },
      chosedArchive: null,

      newTitle: '',
      addSubmitting: false,
      delSubmitting: false,

      addObj: {
        type: 'add',
        visible: false,
        info: null
      }
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    dirId () {
      return this.$route.query.dirId
    },
    addField () {
      const { newTitle } = this
      return [
        {
          key: 'newTitle',
          label: '文件名',
          rules: [{ required: true, message: '请输入' }],
          initialValue: newTitle
        }
      ]
    }
  },
  created () {
    this.getList()
  },
  methods: {
    getList (values) {
      const { curArea, pagination, dirId } = this
      const { pageSize, pageNum } = pagination
      this.loading = true
      getInfoList({ dirId, areaId: curArea.areaId, pageSize, pageNum, ...values }).then(res => {
        this.pagination = {
          total: res.totalElements,
          pageNum: res.number,
          pageSize: pageSize
        }
        this.list = res.content
      }).finally(() => {
        this.loading = false
      })
    },
    choseDoc (doc) {
      this.chosedArchive = doc
      this.$refs.archiveDetail.setMarkdown(doc.attachJSON)
    },
    // 删除文档
    delDocument (chosedArchive) {
      this.$confirm('您确认删除这个文档吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.delSubmitting = true
        delDocument({ id: chosedArchive.id }).then(() => {
          this.$message.success('删除文档成功')
          this.chosedArchive = null
          this.newTitle = ''
          this.$refs.archiveDetail.setMarkdown('')
          this.getList()
        }).finally(() => {
          this.delSubmitting = false
        })
      })
    },
    saveContent (doc) {
      if (isEmpty(doc)) {
        this.$message.error('请先选择文件')
        return
      }
      this.saveDocument(doc)
    },
    // 保存文档
    saveDocument (doc) {
      const { curArea, dirId } = this
      const attachJSON = this.$refs.archiveDetail.getMarkdown()
      console.log(attachJSON)

      this.addSubmitting = true
      const params = {
        areaId: curArea.areaId,
        dirId,
        title: doc.title,
        attachJSON,
        audited: 1
      }
      if (doc) {
        params.id = doc.id
      }
      addDocument(params).then(() => {
        this.$message.success('保存文档内容成功')
        this.chosedArchive = null
        this.newTitle = ''
        this.$refs.archiveDetail.setMarkdown('')
        this.getList()
      }).finally(() => {
        this.addSubmitting = false
      })
    },

    addDocument (doc) {
      const { newTitle, curArea, dirId } = this

      this.addSubmitting = true
      const params = {
        areaId: curArea.areaId,
        dirId,
        title: newTitle,
        attachJSON: doc ? doc.attachJSON : '',
        audited: 1
      }
      if (doc) {
        params.id = doc ? doc.id : ''
      }
      addDocument(params).then(() => {
        this.$message.success('保存文档成功')
        this.chosedArchive = null
        this.newTitle = ''
        this.$refs.archiveDetail.setMarkdown('')
        this.getList()
      }).finally(() => {
        this.addSubmitting = false
      })
    },

    // 增加文档
    addSubmit (res) {
      console.log(res)
      this.addObj.visible = false
      this.newTitle = res.newTitle
      this.addDocument(this.addObj.info)
    },
    addHandle (type = 'add', info) {
      this.newTitle = info?.title
      this.addObj = {
        type,
        visible: true,
        info
      }
    },
    downloadHandle () {
      const { chosedArchive } = this
      console.log(chosedArchive)
      downloadCode(chosedArchive.attachJSON, `${chosedArchive.title}.pdf`)
    },
    // 全屏
    fullSreen () {}
  }
}
</script>
<style lang="scss" scoped>
.listBox{
  .item{
    padding: 10px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: 1px dashed #dcdcdc;

    .dv{
      flex: 1;
    }
  }
}
</style>
